<template>
  <div class="content">
    <div class="titile">评价</div>
    <img src="/images/35-37.png" alt="" class="orimages" />
    <div class="container">
      <div class="conTitle">
        <h3>店铺名称：{{ evaOrder.mallName }}</h3>
      </div>
      <div class="faContainer">
        <div class="conLeft">
          <div
            class="conLeft-f"
            v-for="(item, idx) in evaOrder.orderDetailesList"
            :key="idx"
          >
            <img :src="item.goodsThumbnail" alt="" width="80px" height="80px" />
            <div>
              <p>{{ item.goodsName }}</p>
              <p>¥{{ item.price / 100 }}/套</p>
            </div>
          </div>
          <span
            v-if="this.bargain.length > 3"
            @click="showAll = !showAll"
            style="
              color: #1289ff;
              text-align: center;
              cursor: pointer;
              font-weight: 500;
            "
            >{{ word }}</span
          >
        </div>
        <div class="conRight">
          <div>
            <el-form
              :model="editForm"
              :inline="true"
              :rules="rules"
              label-width="80px"
            >
              <el-form-item label=" 我的评价:">
                <el-rate
                  v-model="editForm.star"
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
              </el-form-item>
              <el-form-item prop="eva">
                <el-input
                  v-model.trim="editForm.eva"
                  maxlength="500"
                  show-word-limit
                  type="textarea"
                  placeholder="请输入内容"
                  :rows="8"
                  :style="{
                    width: '460px',
                    marginLeft: '20px',
                    height: '180px',
                  }"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>

          <div>
            <!-- {{ this.$route.query }} -->
          </div>
        </div>
      </div>
    </div>
    <div class="buttons">
      <el-button type="primary" @click="makeComment">发表评论</el-button>
    </div>
  </div>
</template>

<script>
import { tModOrderEvaAdd, getOrderDetails } from "@/api/mallApi/congLinMall";
export default {
  name: "EvaluationOrder",
  data() {
    return {
      rules: {
        eva: [
          { required: true, message: "请输入评论", trigger: "blur" },
          {
            min: 1,
            max: 500,
            message: "长度在 1 到 500 个字符",
            trigger: "blur",
          },
        ],
      },
      editForm: {
        star: 0,
        eva: "",
      },
      evaOrder: {},
      bargain: [],
      showAll: false,
    };
  },
  mounted() {
    this.tModOrderEvaDetail();
  },
  computed: {
    showHandleList() {
      if (this.showAll == false) {
        //收起状态-显示“展示”
        var showList = []; //定义⼀个空数组
        if (this.bargain.length > 3) {
          //控制显⽰前3个
          for (var i = 0; i < 3; i++) {
            showList.push(this.bargain[i]); //将数组的前3条存放到showList数组中
          }
        } else {
          showList = this.bargain; //个数足够显示，不需要再截取
        }
        return showList; //返回当前数组
      } else {
        // 展开状态-显示“收起”
        return this.bargain;
      }
    },
    word() {
      if (this.showAll == false) {
        //对⽂字进⾏处理
        return "展开全部";
      } else {
        return "收起全部";
      }
    },
  },
  methods: {
    tModOrderEvaDetail() {
      getOrderDetails({ orderCode: this.$route.query.orderCode })
        .then((res) => {
          this.evaOrder = res.data;
        })
        .catch((err) => {});
    },
    makeComment() {
      const { star, eva } = this.editForm;

      const values = {
        star,
        eva,
        orderId: this.$route.query.id,
        mallCode: this.$route.query.mallCode,
      };
      console.log("values", values);
      tModOrderEvaAdd(values).then((res) => {
        if (res.success) {
          this.$message.success("评论成功");
          this.$router.push({
            path: "/mall/profile/evaluationManagement",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  // display: none; /* 将其显示为none来隐藏 */
  width: 6px;
}
.content {
  height: 1041px;
  background: #fff;
  padding: 20px 0 0 20px;
  .buttons {
    // background: pink;
    margin-top: 50px;
    button {
      margin-left: 43%;
      width: 150px;
      height: 40px;
    }
  }

  .titile {
    font-family: "Source Han Sans CN Bold";
    font-weight: 700;
    font-size: 20px;
    text-align: left;
    color: #3c3c3c;
  }
  .orimages {
    width: 990px;
    margin-top: 20px;
  }
  .container {
    width: 100%;
    height: 50%;
    border: 2px solid #e0e0e0;
    margin-top: 20px;
    // background: #3c3c3c;
    .conTitle {
      width: 100%;
      height: 70px;
      background: #f8f8f8;
      line-height: 70px;
      font-family: "Source Han Sans CN Bold";
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.02px;
      color: #000;
      padding-left: 20px;

      h3 {
        // padding-top: 0px;
        margin-top: 0px;
      }
    }
    .faContainer {
      display: flex;
      .conLeft {
        width: 500px;
        height: 437px;
        border-right: 2px solid #e0e0e0;
        // background: red;
        display: flex;
        flex-direction: column;
        text-align: left;
        padding: 30px 0 0 20px;
        overflow: auto;

        .conLeft-f {
          display: flex;
        }
        p:nth-child(1) {
          margin-left: 15px;
          font-family: "Source Han Sans CN";
          font-weight: 400;
          font-size: 16px;

          color: #000;
        }
        p:nth-child(2) {
          margin-left: 15px;
          font-family: "Source Han Sans CN Bold";
          font-weight: 700;
          font-size: 20px;
          color: #ff6b00;
        }
      }
      .conRight {
        width: 500px;
        height: 400px;
        // background: pink;
      }
    }
  }
}
</style>
